/**
 * @author Mahesh
 * Note: The $ method used in this file is the jQuery version and not the native one
 * So, the usage will be different form the rest of the project.
 */
window.onload = onloadFunction;
function onloadFunction() {
	// Event handlers
	$('#skipBreakButton')[0].onclick = skipBreak;
	$("#enableDisableSounds")[0].addEventListener('mouseover',
			imgOnMouseOver, false);
	$("#enableDisableSounds")[0].addEventListener('mouseout',
			imgOnMouseOut, false);
	$("#enableDisableSounds")[0].addEventListener('click',
			imgChangeOnClick, false);
	setMuteButtonImage(parseBoolean(getQueryStringValue("soundEnabled")));
	
	//Determine the current state of the audioNotificationButton
	if(parseBoolean(getQueryStringValue("soundEnabled"))) {
		$("#enableDisableSounds")[0].addEventListener('click',
				window.disableSounds, false);
	}
	else {
		$("#enableDisableSounds")[0].addEventListener('click',
				window.enableSounds, false);
	}
	
	$("#nextBreakTime")[0].innerHTML = new Date(getQueryStringValue("nextBreakTime")).toLocaleTimeString();
	
	remainingBreakCountDownTimer(Math.round(getQueryStringValue("breakDuration")));
};

function disableSounds() { 
	markSettingsStale("true");
	setAudioNotificationSetting(false);
	
	$("#enableDisableSounds")[0].innerHTML = "Unmute";
	$("#enableDisableSounds")[0].removeEventListener('click',
			window.disableSounds, false);
	$("#enableDisableSounds")[0].addEventListener('click',
			window.enableSounds, false);
};

function enableSounds() {
	markSettingsStale("true");
	setAudioNotificationSetting(true);
	
	$("#enableDisableSounds")[0].innerHTML = "Mute";
	$("#enableDisableSounds")[0].removeEventListener('click',
			window.enableSounds, false);
	$("#enableDisableSounds")[0].addEventListener('click',
			window.disableSounds, false);
};

function skipBreak() {
	closeNotification();
};

function closeNotification() {
	window.close();
};

function remainingBreakCountDownTimer(breakDuration){
    $('#counter').countdown({
      image: '../Resources/digits.png',
      startTime: convertSecondsToMMSSFormat(breakDuration),
      timerEnd: function(){ closeNotification(); },
      format: 'mm:ss'
    });
};

function convertSecondsToMMSSFormat(seconds) {
	if(seconds < 0) {console.log("Invalid input for seconds: " + seconds); return '00:00';}
	
	var minutes = Math.floor(seconds/60);
	return appendZeroes(minutes) + ":" + appendZeroes(seconds%60);
};

//Make the string two character long by appending zeroes to the left
function appendZeroes(input) { 
	var returnString = input.toString();
	var zeroesRequired = Math.max(0, 2 - returnString.length);
	
	if(zeroesRequired == 0) return returnString;
	else return '0' + returnString;
};

/* Presentation had to be combined with behavior. I think there is no way out, 
 given there is no way to change the 'src' attribute of 'img' in CSS */
function imgOnMouseOver() { 
	var currentSource = $('#enableDisableSounds')[0].src
	var dotIndex = currentSource.lastIndexOf(".");
	
	$('#enableDisableSounds')[0].src = currentSource.substring(0, dotIndex) + "OnMouseOver" + "." + currentSource.substring(dotIndex+1, currentSource.length);
}

function imgOnMouseOut() { 
	var currentSource = ($('#enableDisableSounds')[0].src);
	$('#enableDisableSounds')[0].src = currentSource.replace("OnMouseOver", "");
}

function imgChangeOnClick() {
	var currentSource = ($('#enableDisableSounds')[0].src); 
	
	if(currentSource.search("unMuteButton") != -1) {
		currentSource = currentSource.replace("unMute", "mute");
	}
	else if(currentSource.search("muteButton") != -1) {
		currentSource = currentSource.replace("mute", "unMute");
	}
	else {
		console.log("ERROR: imgChangeOnClick - Unexpected image source");
	}

	$('#enableDisableSounds')[0].src = currentSource;
}

function setMuteButtonImage(setting) {
	if(setting == true) $('#enableDisableSounds')[0].src = "../Resources/muteButton.jpg";
	else $('#enableDisableSounds')[0].src = "../Resources/unMuteButton.jpg";
}